<!--
 * @Author: ChenDong 1516216399@qq.com
 * @Date: 2024-07-03 15:09:08
 * @LastEditors: ChenDong 1516216399@qq.com
 * @LastEditTime: 2024-07-04 14:23:03
 * @FilePath: \武汉实习\elementplus\index.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入Elementplus Css样式 -->
    <link rel="stylesheet" href="../../css/element-plus.css">
    <style>
        .el-aside {
            height: 90vh;
        }
        .el-col-12{
            max-width: 100%;
            flex:1 0 50%;
        }
    </style>
</head>
<div id="app">
    <div class="main">
        <!-- 面包屑 breadcrumb -->
        =       <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">后台数据</el-breadcrumb-item>
            <el-breadcrumb-item><a href="page6.html">游戏热门</a></el-breadcrumb-item>
        </el-breadcrumb>
    </div>
        <div style="margin-top: 20px">
            <el-row>
                <el-col :span="24" >
                    <el-card>
                        <div id="chart1"  style="width: 100%;height: 300px;">

                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>




    </div>
</div>

<body>
<!-- 导入vue框架 -->
<script src="../../js/v3.2.8/vue.global.prod.js"></script>
<!-- 导入ElementPlus框架 -->
<script src="../../js/element-plus.js"></script>
<!-- 导入Elementplus Icon  -->
<script src="../../js/element-icons.js"></script>
<script src="../../js/echarts.min.js"></script>
<script>
    // createApp()接受一个{}参数，用来创建一个vue应用
    // reactive 专门用于创建对象{}、数组[]类型的响应式数据
    // ref 用来创建Number bool string,基础数据类型

    document.addEventListener("DOMContentLoaded",function (){

        const chart1Dom = document.querySelector("#chart1")


        fetch("http://localhost:8080/webchatsai_war_exploded/echarts")
            .then(response =>response.json())
            .then(data=>{
                const chart1Option = {
                    dataset: [
                        {
                            dimensions: ['date', 'total',],
                            source: [
                                ["CS:GO",13032],
                                ["LOL",7130],
                                ["Fortnite",4347],
                                ["CS",4137],
                                ["Dota 2",3836],
                                ["Overwatch",3494],
                                ["PUBG",2754],
                                ["Hearthstone",2423],
                                ["StarCraftII",2078],
                                ["SSBU",1879],
                            ]
                        },
                        {
                            transform: {
                                type: 'sort',
                                config: { dimension: 'total', order: 'desc' }
                            }
                        }
                    ],
                    xAxis: {
                        type: 'category',
                        axisLabel: { interval: 0, rotate: 0}
                    },
                    yAxis: {},
                    series: {
                        type: 'bar',
                        encode: { x: 'date', y: 'total' },
                        datasetIndex: 1
                    }
                }

                initEcharts(chart1Dom,chart1Option);
            })
            .catch(error=>{
                console.log(error)
            })



    })
    function initEcharts(dom,option){
        //初始化echarts 实例
        const domEcharts = echarts.init(dom);
        //设置echarts配置
        domEcharts.setOption(option);
    }




    const {
        createApp,
        reactive,
        ref
    } = Vue;
    // const msg1 = "字符串类型";
    // const msg = ref("字符串类型")


    const app = createApp({
        setup() {


            // 返回模板中需要的响应式引用
            return {
                //msg
                tableData,
                dialogFormVisible,
                form
            };
        }

    });
    // 应用使用element plus 组件
    app.use(ElementPlus);
    // "location" 参数对应<location>
    app.component("location" , ElementPlusIconsVue.Location)
    app.component("document" , ElementPlusIconsVue.Document)
    app.component("icon-menu" , ElementPlusIconsVue.Menu)
    app.component("setting" , ElementPlusIconsVue.Setting)

    //将应用挂载到 #app
    app.mount('#app');
</script>

</body>

</html>